<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/list.css">

<link rel="stylesheet" type="text/css" href="css/demostyle.css">

<style>
.bl-tab-show{ padding:16px;}
</style>
</head>

<body>

<div class="demobox">
	<div class="h3">选项卡</div>
    <div class="bl-tab-head bl-tab-def js-tab">
    	<ul>
        	<li class="cur"><a>选项卡</a></li>
            <li><a>选项卡</a></li>
            <li><a>选项卡</a></li>
        </ul>
    </div>
    <div class="bl-tab-con">
    	<div class="bl-tab-show" style="display:block">111</div>
        <div class="bl-tab-show">222</div>
        <div class="bl-tab-show">333</div>
    </div>
    
    <div class="h3">等分的选项卡</div>
    <div class="bl-tab-head bl-tab-def js-tab">
    	<ul class="ui-cols-4">
        	<li class="col"><a>选项卡</a></li>
            <li class="col cur"><a>选项卡</a></li>
            <li class="col"><a>选项卡</a></li>
            <li class="col"><a>选项卡</a></li>
        </ul>
    </div>
    
    <div class="h3">右边自适应</div>
    <div class="bl-tab-head bl-tab-def js-tab">
    	<ul>
        	<li><a>选项卡</a></li>
            <li class="cur"><a>选项卡</a></li>
            <li><a>选项卡</a></li>
            <li class="fn-unf"><a>选项卡</a></li>
        </ul>
    </div>
    
    <div class="h3">只有个底线的选项卡</div>
    <div class="bl-tab-head bl-tab-bline js-tab">
    	<ul>
        	<li><a>选项卡</a></li>
            <li class="cur"><a>选项卡</a></li>
            <li><a>选项卡</a></li>
        </ul>
    </div>
    
    
    
    
</div>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
